<!--
* Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
*
* Copyright (C) 2015 Clinton Health Access Initiative (CHAI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
*
* This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<!--
<ng-include src="/public/lib/angular-ui/bootstrap/ui-bootstrap-tpls-0.8.0.min.js"></ng-include>
-->
<script id="template/accordion/accordion.html" type="text/ng-template">
    <div class="accordion" ng-transclude></div>
</script>

<script id="template/accordion/accordion-group.html" type="text/ng-template">
    <div class="accordion-group">
        <div class="accordion-heading" style="margin-bottom:0; border-bottom:0">
            <a style="bottom:0" class="accordion-toggle" ng-class="{'collapsed':!isOpen,'open':isOpen}"
               ng-click="isOpen = !isOpen" accordion-transclude="heading">{{heading}}</a>
        </div>
        <div class="accordion-body" style="display:block; margin-bottom:0" collapse="!isOpen">

            <div class="accordion-inner" ng-transclude></div>
        </div>
    </div>
</script>

<style>
    .table td._yellow {color:#cccc00}
    .table td._red {color:red}
    .table td._green {color:green}

    table#stockTable {
    width:98% !important;
    position:relative !important;
    }
</style>

<div style="background-color: #f9f9f9; padding: 5px">
    <div ng-show="pendingRequisition.length > 0 || equipmentNonFunctionalAlerts.length >0">
        <ng-include src="'/public/pages/vaccine/inventory/dashboard/partials/accordion-template.html'"></ng-include>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <div class="simple-panel blue-madison" style="border: solid 1px #44b6ae !important;">
                <div class="panel-header bg-blue-madison"
                     style="border: solid 1px #44b6ae !important;background: none repeat scroll 0% 0% #44b6ae !important;">
                    <i class="flaticon-pie2"></i>&nbsp;&nbsp;
                    <span openlmis-message="title.stock.status"></span>
                </div>
                <!--Filter start here-->
                <div ng-show="showProgram" style="margin-left:30px !important">
                    <select ng-model="selectedProgramId">
                        <option ng-repeat="program in userPrograms" value="{{program.id}}">{{program.name}}</option>
                    </select>
                </div>
                <div class="clearfix"><br/></div>
                <div class="row-fluid">
                    <div class="span4" style="margin-left:30px !important">
                        <strong id="stock-date-label" openlmis-message="label.stock.adjustment.date.reported"> </strong>:&nbsp;
                        <span id="stock-status-date" ng-bind="date | date:'dd-MM-yyyy'"></span>
                    </div>
                </div>
                <div class="row-fluid" style="margin-left:30px !important">
                    <div class="span12">
                        <label openlmis-message="label.requisition.facilityType"></label>
                    </div>
                </div>

                <div class="row-fluid" style="margin-left:30px !important">
                    <div class="span2 form-inline">
                        <input id="myFacilityRnr" type="radio" ng-model="selectedType" value="0"
                               ng-checked="selectedType==0" ng-change="changeFacilityType();"/>&nbsp;
                        <label for="myFacilityRnr">
                            {{facilityDisplayName}}
                        </label>
                    </div>
                    <div class="span2 form-inline" ng-show="facilityLevels.length > 0">
                        <input id="supervisedFacilityRnr" type="radio" ng-model="selectedType" value="1"
                               ng-checked="selectedType==1" ng-change="changeFacilityType();"/>&nbsp;
                        <label for="supervisedFacilityRnr">
                            <span openlmis-message="label.my.recipients"></span>
                        </label>
                    </div>
                    <div class="span4 form-inline" ng-show="selectedType==1">
                        <div class=" " style="padding: 2px;">
                            <form ng-submit="filterGrid()" name="filterForm" novalidate>
                                <div filter-container class="clearfix">
                                    <vaccine-facility-level-filter
                                            class="form-cell horizontalFilters"></vaccine-facility-level-filter>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
                <div class="clearfix"><br/></div>

                <!--Filter Ends Here-->

                <div>
                    <div class="row-fluid">
                        <div class="span6" style="margin-left:5px;" id="graphArea">
                            <stockchart ng-model='data' width="600" height="300" id="one"></stockchart>
                        </div>
                        <div ng-show="showGraph" class="span6" style="margin-left:-5px;">
                            <div class="rnr-table">
                                <table id="stockTable" class="table table-bordered" fixed-table-header>
                                    <thead>
                                    <tr>
                                        <th class="col-primaryName">
                                            <span openlmis-message="label.products"></span>
                                        </th>
                                        <th class="col-quantityOnHand">
                                            <span openlmis-message="header.order.requisition.stock.available"></span>
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody ng-repeat="category in stockCardsByCategory">
                                    <tr ng-if="category.productCategory !=='no-category'">
                                        <td class="productCategory" id="vaccine" colspan="2">
                                            <!--<span ng-if="category.productCategory ==='no-category'" openlmis-message="label.products" ></span>-->
                                            <span ng-if="category.productCategory !=='no-category'">{{category.productCategory}}</span>
                                        </td>
                                    </tr>
                                    <tr ng-repeat="stock in category.stockCards">
                                        <td class="col-product">{{stock.product.primaryName}}</td>
                                        <td class="col-product {{v.cssClass}}">{{stock.totalQuantityOnHand}}</td>
                                    </tr>
                                    </tbody>

                                </table>

                            </div>
                        </div>
                    </div>
                    <div class="span12"
                         ng-show='data.stockcards === null && (selectedType === "0" || filter.facilityId !== "0") '>
                        <span openlmis-message="message.vaccine.noDataToshowInDatatable"></span></div>
                </div>
            </div>
        </div>
    </div>

    <div form-toolbar id="action_buttons" class="action-buttons">
      <!--  <input class="form-cell button-row">-->
            <input ng-disabled='selectedType === "1"' ng-show="hasPermission('CREATE_ORDER_REQUISITION') && createOrder==true" ng-click="Requisition()" id="requisitionButton"
                   type="submit" id="requisition-button" class="btn btn-primary save-button"
                   openlmis-message="button.create.requisition"/>

            <input ng-disabled='selectedType === "1"' type="submit"  ng-show="hasPermission('RECEIVE_STOCK') && receiveConsignment==true" ng-click="ReceiveConsignment()" id="requisitionButton2"
           class="btn btn-primary save-button"  value="Receive Consignment"/>

            <input ng-disabled='selectedType === "1"' id="adjustButton" type="submit" id="adjust-button"
                   ng-click="Adjustment()"
                   class="btn btn-primary save-button"
                   openlmis-message="button.stock.adjustment"/>

        </div>


        <div class="toolbar-error" id="saveErrorMsgDiv">
            <span openlmis-message="error" ng-show="error"></span>&nbsp;
            <span ng-show="errorProgram" ng-bind="errorProgram"></span>
        </div>
        <div class="toolbar-success" id="saveSuccessMsgDiv" openlmis-message="message" ng-show="message"></div>
    </div>

</div>
